<script setup lang="ts">
import InnerItem1 from './inner-item1/index.vue'
import InnerItem2 from './inner-item2/index.vue'
import InnerItem3 from './inner-item3/index.vue'
import InnerItem4 from './inner-item4/index.vue'
</script>

<template>
  <div
    class="pc-container-content-1312-grid bg-[#f6f6f6] py-[13vw] sm:py-[clamp(3.125rem,2.0388rem+2.6738vw,3.75rem)] lg:pt-[clamp(3.75rem,1.25rem+3.9063vw,5rem)] lg:pb-[clamp(5.5rem,0.5rem+7.8125vw,8rem)]"
  >
    <div
      class="middle-content grid gap-y-[1.75rem] sm:gap-y-[0.25rem] lg:gap-y-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)]"
    >
      <InnerItem1 />
      <InnerItem2 />
      <InnerItem3 />
      <InnerItem4 />
    </div>
  </div>
</template>
